<template>
  <el-row/>
  <el-row/>
  <el-row/>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="4">
      <el-text>请选择需要更换的词典</el-text>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="4">
      <el-select
        v-model="dictSelected"
        placeholder="Select"
      >
        <el-option v-for="dict in dictList" :key="dict.key" :title="dict.title" :value="dict.value"/>
      </el-select>
    </el-col>
    <el-col :span="4">
      <el-button @click="userSelectDict">确定</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="4">
      <el-text class="notice" v-model="responseValue">成功更换</el-text>
    </el-col>
  </el-row>
  <el-row/>
  <el-row/>
  <el-row/>
  <el-row>
    <el-col :span="20"/>
    <el-button @click="RedirectToMainPage">返回主页面</el-button>
  </el-row>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import api from '@/utils/axiosUtil';
import type { ApplicationDictRequest } from './DictSelectPageInterface';

const responseValue = ref('');

const router = useRouter();

const dictList = [
  {key:"xinhua",title:"新华大辞典",value:"新华大辞典"},
  {key:"oxford",title:"牛津大辞典",value:"牛津大辞典"},
  {key:"collins",title:"柯林斯大辞典",value:"柯林斯大辞典"}
]
const dictSelected = ref('');

function RedirectToMainPage(){
  router.push('main');
}

onMounted(()=>{
  dictSelected.value = '牛津大辞典'
})


async function userSelectDict(){
  const applicationDictRequest:ApplicationDictRequest = {
    userId: test_user_id,
    dictName: test_dictName
  }
  try {
    const response = await api.post<Map<string,string>>('/application-dict', applicationDictRequest);
    for(const key in response.data) {
        responseValue.value = "key:"+key+"value:"+response.data.get(key);
    }
  } catch (error) {
    console.error('登录失败:', error);
    throw error;
  }
}



//------------------------------测试代码------------------------------
const test_user_id = '1';
const test_dictName = 'highschool_words_production';
</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
  min-height: 20px;
}
.el-col {
  margin: 5px;
}
.notice {
  color: var(--el-color-success-dark-2);
}
</style>
